<template>
    <div class="right-menu">
        <el-dropdown class="avatar-container" trigger="click">
            <div class="avatar-wrapper">
                <img src="face.gif" class="user-avatar">
                <i class="el-icon-caret-bottom" />
            </div>
            <template #dropdown>
            <el-dropdown-menu>
                <router-link to="/">
                    <el-dropdown-item>
                    Home
                    </el-dropdown-item>
                </router-link>
                <a target="_blank" href="">
                    <el-dropdown-item>Github</el-dropdown-item>
                </a>
                <a target="_blank" href="">
                    <el-dropdown-item>Docs</el-dropdown-item>
                </a>
                <el-dropdown-item>
                    <span style="display:block;">Log Out</span>
                </el-dropdown-item>
            </el-dropdown-menu>
            </template>
        </el-dropdown>
    </div>
</template>

<style scoped>
a{color:#000;text-decoration:none} 
a:hover{color:#F00}
.avatar-wrapper {
    /* align-items: center; */
    margin-top: 10px;
    /* position: relative; */
}
.user-avatar {
    cursor: pointer;
    width: 40px;
    height: 40px;
    border-radius: 10px;
}
.right-menu {
    /* box-shadow: 24px 4px 29px #ccc; */
    float: right;
    /* display: flex; */
    /* height: 100%; */
    /* line-height: 50px; */
}
</style>